<!-- 商家分布地图 -->
<template>
	<div class='com-container' @dblclick="revertMap">
		<div class='com-chart' ref='map_ref'></div>
	</div>
</template>

<script>
	import {mapState} from 'vuex'
	import axios from 'axios'
	import {
		getProvinceMapInfo
	} from '@/utils/map_utils.js'

	export default {
		data() {
			return {
				chartInstance: null,
				allData: null,
				mapData: {}
			}
		},
		
		computed: {
			...mapState(['theme'])
		},
		
		watch: {
			theme() {
				this.chartInstance.dispose()
				this.initChart()
				this.screenAdapter()
				this.updateChart()
			}
		},
		mounted() {
			this.initChart()
			this.getData()
			window.addEventListener('resize', this.screenAdapter)
			this.screenAdapter()
		},
		destroyed() {
			window.removeEventListener('resize', this.screenAdapter)
		},
		methods: {
			async initChart() {
				this.chartInstance = this.$echarts.init(this.$refs.map_ref, this.theme)
				const res = await axios.get('http://localhost:80/static/map/china.json')
				// const res = await axios.get('http://localhost:8080/static/map/china.json')
				this.$echarts.registerMap('china', res.data)
				const initOption = {
					title: {
						text: '▎商家分布',
						left: 20,
						top: 20
					},
					geo: {
						type: 'map',
						map: 'china',
						top: '5%',
						bottom: '5%',
						itemStyle: {
							areaColor: '#87CEEB',
							borderColor: '#333'
						}
					},
					legend: {
						left: '5%',
						bottom: '5%',
						orient: 'vertical'
					}
				}
				this.chartInstance.setOption(initOption)
				this.chartInstance.on('click', async arg => {
					const provinceInfo = getProvinceMapInfo(arg.name)
					// 做一个缓存，数据不存在时才发起请求
					if (!this.mapData[provinceInfo.key]) {
						if(provinceInfo.path == '/static/map/province/undefined.json') {
							return 
						}
						const res = await axios.get('http://localhost:80' + provinceInfo.path)
						// const res = await axios.get('http://localhost:8080' + provinceInfo.path)
						this.mapData[provinceInfo.key] = res.data
						this.$echarts.registerMap(provinceInfo.key, res.data)
					}
					const changeOption = {
						geo: {
							map: provinceInfo.key
						}
					}
					this.chartInstance.setOption(changeOption)
				})
			},
			async getData() {
				const {
					data: res
				} = await this.$http.get('map')
				this.allData = res
				this.updateChart()
			},
			updateChart() {
				const legendArr = this.allData.map(item => {
					return item.name
				})

				const seriesArr = this.allData.map(item => {
					return {
						type: 'effectScatter',
						rippleEffect: {
							scale: 5,
							brushType: 'stroke'
						},
						name: item.name,
						data: item.children,
						coordinateSystem: 'geo'
					}
				})

				const dataOption = {
					legend: {
						data: legendArr
					},
					series: seriesArr
				}
				this.chartInstance.setOption(dataOption)
			},
			screenAdapter() {
				const titleFontSize = this.$refs.map_ref.offsetWidth / 100 * 3.6
				const adapterOption = {
					title: {
						textStyle: {
							fontSize: titleFontSize
						}
					},
					legend: {
						itemWidth: titleFontSize / 2,
						itemHeight: titleFontSize / 2,
						itemGap: titleFontSize / 2,
						textStyle: {
							fontSize: titleFontSize / 2
						}
					}
				}
				this.chartInstance.setOption(adapterOption)
				this.chartInstance.resize()
			},

			revertMap() {
				const revertOption = {
					geo: {
						map: 'china'
					}
				}
				this.chartInstance.setOption(revertOption)
			}
		}
	}
</script>

<style lang='less' scoped>

</style>
